<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节流</title>
    <style>
        #box{
            width: 100vw;
            height: 100vh;
            background: #000;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    const oBox = document.querySelector('#box')

    function print11(e){
        console.log(1)
        // oBox.innerHTML = '点击'
        // oBox.style.color = 'white'
    }
    function debounce(func, wait) {
        var timeout;
        return function () {
            clearTimeout(timeout)
            timeout = setTimeout(func, wait);
        }
    }

    oBox.onmousemove = (e) =>{
        debounce(print11,100)
        // console.log(e)
    }
</script>
</body>
</html>

function debounce(func, wait) {
    var timeout;
    var now = +new Date()
    let oldTime = 0
    console.log(now)
    if (now - oldTime > wait) {
        return function () {
            clearTimeout(timeout)
            timeout = setTimeout(func, wait);
            oldTime = now
        }
    }

}

function eating(i) {
    console.log(`eating ${i} times`)
}

for (let i = 0; i < 10000; i++) {
    debounce(eating(i), 100)
}
